<h3 class="section-label">
  USERS MANAGEMENT
</h3>
<small>Manage the users of the Keycloak / RH-SSO realm, retrieving and assigning them roles.</small>

<div class="container-fluid">
  <div id="pf-list-standard" class="list-group list-view-pf list-view-pf-view">
    <div class="toolbar-pf">
      <div class="col-sm-12">
        <pfng-toolbar [config]="toolbarConfig" (onFilterChange)="handleFilter($event)"></pfng-toolbar>
      </div>
    </div>
    <div *ngFor="let user of users" class="list-group-item">
      <div class="list-view-pf-main-info">
        <div class="list-view-pf-left">
          <span class="fa fa-user list-view-pf-icon-sm"></span>
        </div>
        <div class="list-view-pf-body">
          <div class="list-view-pf-description">
            <div class="list-group-item-heading userName">{{user.username }}</div>
            <div class="list-group-item-text userFullName">{{ kUser(user).firstName }} {{ kUser(user).lastName }}</div>
          </div>
          <div class="list-view-pf-additional-info">
            <div class="list-view-pf-additional-info-item" placement="left">
              <span class="fa fa-envelope"></span> {{ user.email }}
            </div>
            <div class="list-view-pf-additional-info-item" placement="right">
              <button type="button" class="btn btn-link" (click)="getUserRoles(kUser(user).id)" *ngIf="!usersRoles[kUser(user).id]">View roles</button>
              <span class="label label-primary" *ngIf="userHasRole(kUser(user).id, 'user')">Registred</span>
              <span class="label label-success" *ngIf="userHasRole(kUser(user).id, 'manager')">Manager</span>
              <span class="label label-danger" *ngIf="userHasRole(kUser(user).id, 'admin')">Admin</span>
            </div>
          </div>
        </div>
        <div class="list-view-pf-actions">
          <div class="dropdown pull-right dropdown-kebab-pf" dropdown>
            <button id="dropdownKebabRight" class="btn btn-link dropdown-toggle" type="button" dropdownToggle aria-controls="dropdown-actions" aria-haspopup="true" aria-expanded="true">
              <span class="fa fa-ellipsis-v"></span>
            </button>
            <ul id="dropdown-actions" class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
              <li *ngIf="usersRoles[kUser(user).id] && !userHasRole(kUser(user).id, 'user')"><a (click)="assignRoleToUser(kUser(user).id, user.username!, 'user')">Register</a></li>
              <li *ngIf="usersRoles[kUser(user).id] && !userHasRole(kUser(user).id, 'manager')"><a (click)="assignRoleToUser(kUser(user).id, user.username!, 'manager')">Add Manager Role</a></li>
              <li *ngIf="usersRoles[kUser(user).id] && !userHasRole(kUser(user).id, 'admin')"><a (click)="assignRoleToUser(kUser(user).id, user.username!, 'admin')">Add Admin Role</a></li>
              <li *ngIf="usersRoles[kUser(user).id] && userHasRole(kUser(user).id, 'manager')"><a (click)="removeRoleFromUser(kUser(user).id, user.username!, 'manager')">Remove Manager Role</a></li>
              <li *ngIf="usersRoles[kUser(user).id] && userHasRole(kUser(user).id, 'admin')"><a (click)="removeRoleFromUser(kUser(user).id, user.username!, 'manager')">Remove Admin Role</a></li>
              <li *ngIf="hasRepositoryTenancyEnabled()"><a (click)="openGroupsManagementDialog(user)">Manage Groups</a></li>
            </ul>
          </div>
      </div>
    </div>
  </div>

  <pfng-pagination [config]="paginationConfig"
      (onPageNumberChange)="handlePageNumber($event)"
      (onPageSizeChange)="handlePageSize($event)">
  </pfng-pagination>
</div>